<template>
    <div class="wrapper">
        <div style="margin-left:20;margin-right:20">
            <div class="titleDiv">
                <text class="title1">管理员已设置可提前{{advanceDay}}天接单</text>
            </div>
            <div>
                <bui-tabbar :tabItems="tabTitles" 
                    showSelectedLine=true 
                    @change="onItemChange" 
                    v-model="currentTab"
                    background="#e0e0e0"
                    selectedBackground="#2590f5"
                    normalColor="#666666"
                    selectedColor="#ffffff"
                    borderBottomColor="#2590f5"
                    titleSize="30px"></bui-tabbar>
                    <slider class="slider" @change="onSliderChange" :index="currentTab">
                        <scroller class="container" :style="scrollerStyle" alwaysScrollableVertical="true">
                            <refresh :style="refreshStyle" class="refresh" @refresh="onrefresh(5)" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                                <loading-indicator class="indicator"></loading-indicator>
                            </refresh>
                            <div class="list">
                                <div v-for="(item,index) in formItem0.content" :key="index">
                                    <wxc-cell @wxcCellClicked="" >
                                        <text class="dis-title" slot="title">{{item.lNumber}}</text>
                                    </wxc-cell>
                                    <wxc-cell :has-margin="true" :has-bottom-border="false" @wxcCellClicked="pickTeammates(item)">
                                        <div class="div-dis" slot="title" >
                                            <div class="dis-left">
                                                <div style="flex:5">
                                                    <text style="color:#f49428">{{item.upkeepDate}}</text>
                                                    <text style="color:#808080;margin-top:10">维保日期</text>
                                                </div>
                                                <div style="flex:2">
                                                    <image class="image" :src="calendarGreyImg"></image>
                                                </div>
                                            </div>
                                            <div class="dis-right">
                                                <div style="flex:5;margin-left:20">
                                                    <wxc-tag style="width:60" type="solid"
                                                        tag-color="#fd0000"
                                                        font-color="#ffffff"
                                                        value="分配"></wxc-tag>
                                                    <text style="color:#808080;margin-top:10">维保人员</text>
                                                </div>
                                                <div style="flex:2">
                                                    <image class="image" :src="manImg"></image>
                                                </div>
                                            </div>
                                        </div>
                                    </wxc-cell>
                                </div>
                            </div>
                        </scroller>
                        <scroller class="container" :style="scrollerStyle" alwaysScrollableVertical="true">
                            <refresh :style="refreshStyle" class="refresh" @refresh="onrefresh(4)" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                                <loading-indicator class="indicator"></loading-indicator>
                            </refresh>
                            <div class="list">
                                <div v-for="(item,index) in formItem1.content" :key="index">
                                    <wxc-cell>
                                        <text class="dis-title" slot="title">{{item.lNumber}}</text>
                                    </wxc-cell>
                                    <wxc-cell :has-margin="true" :has-bottom-border="false">
                                        <div class="div-dis" slot="title" >
                                            <div class="dis-left">
                                                <div style="flex:5">
                                                    <text style="color:#f49428">{{item.upkeepDate}}</text>
                                                    <text style="color:#808080;margin-top:10">维保日期</text>
                                                </div>
                                                <div style="flex:2">
                                                    <image class="image" src="bmlocal://assets/calendar-grey.png"></image>
                                                </div>
                                            </div>
                                            <div class="dis-right">
                                                <div style="flex:5;margin-left:20">
                                                    <text style="color:#2590f5">{{item.sName}}</text>
                                                    <text style="color:#808080;margin-top:10">维保人员</text>
                                                </div>
                                                <div style="flex:2">
                                                    <image class="image" src="bmlocal://assets/man.png"></image>
                                                </div>
                                            </div>
                                        </div>
                                    </wxc-cell>
                                </div>
                            </div>
                        </scroller>
                    </slider>
                <!-- <wxc-tab-page ref="wxc-tab-page"
                    :tab-titles="tabTitles"
                    :tab-styles="tabStyles"
                    title-type="text"
                    :tab-page-height="tabPageHeight">
                    <scroller class="container" :style="scrollerStyle">
                        <refresh class="refresh" @refresh="onrefresh(5)" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                            <loading-indicator class="indicator"></loading-indicator>
                        </refresh>
                        <div class="list">
                            <div v-for="(item,index) in formItem0.content" :key="index">
                                <wxc-cell @wxcCellClicked="" >
                                    <text class="dis-title" slot="title">{{item.lNumber}}</text>
                                </wxc-cell>
                                <wxc-cell :has-margin="true" :has-bottom-border="false" @wxcCellClicked="pickTeammates(item)">
                                    <div class="div-dis" slot="title" >
                                        <div class="dis-left">
                                            <div style="flex:5">
                                                <text style="color:#f49428">{{item.upkeepDate}}</text>
                                                <text style="color:#808080;margin-top:10">维保日期</text>
                                            </div>
                                            <div style="flex:2">
                                                <image class="image" :src="calendarGreyImg"></image>
                                            </div>
                                        </div>
                                        <div class="dis-right">
                                            <div style="flex:5;margin-left:20">
                                                <wxc-tag style="width:60" type="solid"
                                                    tag-color="#fd0000"
                                                    font-color="#ffffff"
                                                    value="分配"></wxc-tag>
                                                <text style="color:#808080;margin-top:10">维保人员</text>
                                            </div>
                                            <div style="flex:2">
                                                <image class="image" :src="manImg"></image>
                                            </div>
                                        </div>
                                    </div>
                                </wxc-cell>
                            </div>
                        </div>
                    </scroller>
                    <scroller class="container" :style="scrollerStyle">
                        <refresh class="refresh" @refresh="onrefresh(4)" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                            <loading-indicator class="indicator"></loading-indicator>
                        </refresh>
                        <div class="list">
                            <div v-for="(item,index) in formItem1.content" :key="index">
                                <wxc-cell>
                                    <text class="dis-title" slot="title">{{item.lNumber}}</text>
                                </wxc-cell>
                                <wxc-cell :has-margin="true" :has-bottom-border="false">
                                    <div class="div-dis" slot="title" >
                                        <div class="dis-left">
                                            <div style="flex:5">
                                                <text style="color:#f49428">{{item.upkeepDate}}</text>
                                                <text style="color:#808080;margin-top:10">维保日期</text>
                                            </div>
                                            <div style="flex:2">
                                                <image class="image" src="bmlocal://assets/calendar-grey.png"></image>
                                            </div>
                                        </div>
                                        <div class="dis-right">
                                            <div style="flex:5;margin-left:20">
                                                <text style="color:#2590f5">{{item.sName}}</text>
                                                <text style="color:#808080;margin-top:10">维保人员</text>
                                            </div>
                                            <div style="flex:2">
                                                <image class="image" src="bmlocal://assets/man.png"></image>
                                            </div>
                                        </div>
                                    </div>
                                </wxc-cell>
                            </div>
                        </div>
                    </scroller>
                </wxc-tab-page> -->
            </div>
        </div>
        <wxc-loading :show="showLoading" :need-mask="mask"></wxc-loading>
    </div>
</template>
<script>
import menu from '../common/menu'
import util from '../utils/util';
import {buiHeader,buiIcon,buiTabbar} from 'bui-weex'
import { WxcTabPage, Utils,WxcCell,WxcButton,WxcLoading,WxcTag  } from 'weex-ui';
const picker = weex.requireModule('picker')
export default {
    components: {
        buiHeader,
        buiIcon,
        WxcTabPage,
        Utils,
        WxcCell,
        WxcButton,
        WxcLoading,
        WxcTag,
        menu,
        buiTabbar
    },
    created() {
        
    },
    data() {
        return {
            token:'',
            tabTitles: [
                {
                title: '未分配',
                },
                {
                title: '已分配',
                }
            ],
            currentTab: 0,
            tabStyles: {
                bgColor: '#e0e0e0',
                titleColor: '#666666',
                activeTitleColor: '#fff',
                activeBgColor: '#2590f5',
                isActiveTitleBold: true,
                // iconWidth: 70,
                // iconHeight: 70,
                width: 355,
                height: 100,
                fontSize: 30,
                hasActiveBottom: true,
                // textPaddingLeft: 10,
                // textPaddingRight: 10,
                // normalBottomColor: 'rgba(0,0,0,0.4)',
                // normalBottomHeight: 1,
                hasRightIcon: true,
            },
            valueStyle:{
                color:'#999999',
                marginRight:40
            },
            formItem0: {},
            formItem1: {},
            formItem0Count: '',
            formItem1Count: '',
            advanceDay:0,
            myteamMatesList: [],
            chooseMatesList:[],
            disFilter:{
                upkeepId:'',
                staffId:'',
                staffName:'',
            },
            tabPageHeight: 1334,
            showLoading:false,
            mask:true,
            showMenu:false,
            refreshing: false,
            leftItem: {
                text: '菜单',
            },
            statusHeight: Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40),
            containerHeight:'',
        }
    },
    methods: {
        menuShow(){
          this.showMenu = true
        },
        menuClose(){
          this.showMenu = false
        },
        onrefresh(status){
            this.refreshing = true
            this.getDistributeList(status)
        },
        pickTeammates(item) {
            this.disFilter.upkeepId = item.id
            picker.pick({
                items: this.chooseMatesList,
                index:0,
                // textColor:'#ffffff',
                confirmTitleColor:'#f49428',
                // cancelTitleColor:'#ffffff',
                // titleColor: '#ffffff',
                title: '请选择'
            }, event => {
                if (event.result === 'success') {
                    this.disFilter.staffId = this.myteamMatesList[event.data].value
                    this.disFilter.staffName = this.myteamMatesList[event.data].name
                    this.distributeUpkeep()
                }   
            })
        },
        onSliderChange(e){
            var index = e.index;
            this.currentTab=index;
        },
        getDistributeList(status){
            this.showLoading = true
            let filter = {}
            filter.isTeam = 1
            filter.page = 1
            filter.pageSize = 999
            // 查询未分配
            filter.status = status
            
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': `Bearer `+ this.token
                },
                method: 'POST',    
                name: 'myUpkeepList',
                data: filter
            }).then(resData => {
                if(resData.success){
                    //查询待接收
                    if(status == 5){
                        this.formItem0 = resData.data
                        this.tabTitles[0].title = '未分配'+ this.formItem0.totalElements+'单'
                        this.$storage.set('distribute0', JSON.stringify(resData.data))
                    }
                    //查询进行中
                    if(status == 4){
                        this.formItem1 = resData.data
                        this.tabTitles[1].title = '已分配'+ this.formItem1.totalElements+'单'
                        this.$storage.set('distribute1', JSON.stringify(resData.data))
                    }
                }else{
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }
                
            }, error => {
                this.$notice.toast({
                    message: '网络错误'
                })
            })
            this.showLoading = false
            setTimeout(() => {
                this.refreshing = false
            }, 500)
        },
        getAdvanceDay(){
            let filter = {}
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': `Bearer `+ this.token
                },
                method: 'GET',    
                name: 'getAdvanceDay',
                data: filter
            }).then(res => {
                if(res.success){
                    this.advanceDay = res.data ? res.data : 0
                }else{
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }
            }, error => {
                // this.$notice.toast({
                //     message: '网络错误'
                // })
            })
        },
        getMyTeamMates(){
            let filter = {}
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': `Bearer `+ this.token
                },
                method: 'GET',    
                name: 'getMyTeamMates',
                data: filter
            }).then(res => {
                if(res.success){
                    //缓存
                    this.$storage.set('teamMates', JSON.stringify(res.data))
                    this.myteamMatesList = res.data.map(function (item) {
                        return {
                            name: item.name,
                            value: item.id + ''
                        }
                    })
                    this.chooseMatesList = res.data.map(function (item) {
                        return item.name
                    })
                }else{
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }
            }, error => {
                // this.$notice.toast({
                //     message: '网络错误'
                // })
            })
        },
        distributeUpkeep(){
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': `Bearer `+ this.token
                },
                method: 'POST',    
                name: 'distributeUpkeep',
                data: this.disFilter
            }).then(resData => {
                if(resData.success){
                    this.$notice.toast({
                        message: '分配成功'
                    })
                    this.getDistributeList(5)
                    this.getDistributeList(4)
                }else{
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }
            }, error => {
                this.$notice.toast({
                    message: '网络错误'
                })
            })
        },
        
    },
    created(){
        this.$notice.loading.show()
        const tabPageHeight = Utils.env.getPageHeight()
        if(Utils.env.isIOS()){
            const containerHeight = tabPageHeight-150
            this.scrollerStyle ={ height: containerHeight + 'px' }
           
        }else{
            this.refreshStyle = {marginTop:'-100px'}
            const containerHeight = tabPageHeight-670
            this.scrollerStyle ={ height: containerHeight + 'px' }
        }



        //获取token
        this.token = this.$storage.getSync('token')
        if(!this.token){
            this.$router.setHomePage('/pages/login.js')
        }

        this.getAdvanceDay()
        // 获取缓存数据
        this.$storage.get('distribute0').then(resData => {
            this.formItem0 = JSON.parse(resData);
            this.tabTitles[0].title = '未分配'+ this.formItem0.totalElements+'单'
        },error => {
            this.getDistributeList(5)
        })

        this.$storage.get('distribute1').then(resData => {
            this.formItem1 = JSON.parse(resData);
            this.tabTitles[1].title = '已分配'+ this.formItem1.totalElements+'单'
        },error => {
            this.getDistributeList(4)
        })

        //从缓存获取小组成员
        this.$storage.get('teamMates').then(resData => {
            var jsonData = JSON.parse(resData);
            this.myteamMatesList = jsonData.map(function (item) {
                return {
                    name: item.name,
                    value: item.id + ''
                }
            })
            this.chooseMatesList =jsonData.map(function (item) {
                return item.name
            })
        },error => {
            this.getMyTeamMates()
        })
        this.$notice.loading.hide()
    }
    
}
</script>
<style scoped>
.status-bar{
    background-color:#f49428;
}
.image {
    width: 70px;
    height: 70px;
}
.container {
    width: 750px;
    background-color: #f2f3f4;
}
.refresh {
    width: 750px;
    height: 100px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}
.indicator {
    margin-top: 16px;
    height: 80px;
    width: 80px;
    color: #f49428;
}

.div-dis{
    flex-direction: row;
}
.dis-title{
    font-weight: bold;
}
.dis-left{
    flex:6;
    flex-direction: row;
}
.dis-right{
    flex:7;
    flex-direction: row;
    border-left-width: 1;
    border-color: #e2e2e2;
}
.title{
    color: #999999;
    margin: 10 0 10 10;
    font-size: 25;
}
.titleDiv{
    flex-direction: row;
}
.title1{
    flex: 1;
    color: #999999;
    margin: 10 0 10 10;
    font-size: 25;
}
</style>

